<template>
	<view class="current_color">
		<view>
			<uni-search-bar class="uni-mt-10 top" radius="7" placeholder="自动显示隐藏" clearButton="auto" cancelButton="none"
				@confirm="search">
			</uni-search-bar>

			<liu-dropdown :menuList="menuList" :dataObj="dataObj" @change="change"></liu-dropdown>
		</view>

		<view class="container">
			<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger" @fabClick="fabClick" />
		</view>
	</view>
</template>

<script>
	import zlxlsGoodsEditList from "@/components/zlxls-goods-edit-list/zlxls-goods-edit-list.vue";
	export default {
		components: {
			zlxlsGoodsEditList
		},
		data() {
			return {
				menuList: [{
					id: 1,
					name: '分类',
					isMultiple: false, //是否多选
					showType: 3 //下拉框类型(1、2、3、4)
				}, {
					id: 2,
					name: '附近',
					isMultiple: false, //是否多选
					showType: 2 //下拉框类型(1、2、3、4)
				}],
				//下拉框数据源
				dataObj: {
					//类型1数据结构
					itemList1: [{
						id: 1,
						name: '公益活动'
					}, {
						id: 2,
						name: '室内活动'
					}, {
						id: 3,
						name: '室外活动'
					}, {
						id: 4,
						name: '其他活动'
					}],
					//类型2数据结构
					itemList2: [{
						id: 1,
						name: '地区',
						childs: [{
							id: 1,
							name: '学校'
						}, {
							id: 2,
							name: '火车站'
						}]
					}, {
						id: 2,
						name: '商场',
						childs: [{
							id: 1,
							name: '北京华联'
						}, {
							id: 2,
							name: '国芳百货'
						}, {
							id: 3,
							name: '欣大'
						}]
					}]
				},
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				content: [{
						iconPath: '/static/image.png',
						selectedIconPath: '/static/image-active.png',
						text: '相册',
						active: false
					},
					{
						iconPath: '/static/home.png',
						selectedIconPath: '/static/home-active.png',
						text: '首页',
						active: false
					},
					{
						iconPath: '/static/star.png',
						selectedIconPath: '/static/star-active.png',
						text: '收藏',
						active: false
					}
				]
			}
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			change(e) {
				console.log("e:", e);
			},
			trigger(e) {
				console.log(e)
				this.content[e.index].active = !e.item.active
				uni.showModal({
					title: '提示',
					content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			fabClick() {
				uni.showToast({
					title: '点击了悬浮按钮',
					icon: 'none'
				})
			},
			switchBtn(hor, ver) {
				if (hor === 0) {
					this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
					this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
				} else {
					this.horizontal = hor
					this.vertical = ver
				}
				this.$forceUpdate()
			},
			switchColor() {
				this.is_color_type = !this.is_color_type
				if (this.is_color_type) {
					this.pattern.iconColor = '#aaa'
					this.pattern.buttonColor = '#fff'
				} else {
					this.pattern.iconColor = '#fff'
					this.pattern.buttonColor = '#007AFF'
				}
			},
			switchIcon() {
				if (this.pattern.icon == 'plus') {
					this.pattern.icon = 'plusempty'
				} else {
					this.pattern.icon = 'plus'
				}
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style lang="scss">
	.list_margin {
		margin-top: 120rpx;
	}

	.current_color {
		background-color: #fff;
		// overflow: hidden;
	}

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}

	.warp {
		padding: 10px;
	}
	
	.button {
		margin-bottom: 10px;
	}
</style>